<template>
  <div class="index-container">
    <DownloadApp></DownloadApp>
    <SwitchSubject></SwitchSubject>

    <!-- 顶部轮播图 -->
    <div class="banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="(item, index) in List.bannerDatas" :key="index">
          <img :src="item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 金刚区 -->
    <van-grid :gutter="15" class="icons">
      <van-grid-item
        v-for="(item, index) in kongList"
        :key="index"
        :icon="item.icon"
        :text="item.name"
        @click="handleKong(item.name)"
      />
    </van-grid>

    <!-- 考试时间 -->
    <div class="test-time mt30">
      <van-icon :name="require('@/assets/images/laba.png')" />
      <span class="ml10">
        距离考试还有
        <span class="bgm" v-for="(item, index) in List.exams.interval" :key="index">{{ item }}</span>天
      </span>
    </div>

    <!-- 最新资讯 -->
    <div class="hot_news mt15">
      <div class="headline">
        <span class="h_left">
          <i>最新资讯</i>
        </span>
      </div>
      <ul>
        <li v-for="(item, index) in List.news" :key="index">
          <van-icon :name="require('@/assets/images/home_hot_news.png')" />
          <router-link
            :to="{ path: '/information-details', query: { id: item.id, subject_id: queryParams.cate_id } }"
          >{{ item.title }}</router-link>
        </li>
      </ul>
    </div>

    <van-divider />

    <!-- 免费直播 -->
    <div class="free">
      <div class="headline">
        <span class="h_left">
          <i>免费直播</i>
        </span>
        <router-link
          :to="{ name: 'FreeLists', query: { subject_id: List.subject_id } }"
          class="h_right"
        >
          查看更多
          <van-icon name="arrow" />
        </router-link>
      </div>
      <div class="free_live">
        <van-swipe :loop="false" :width="320" :show-indicators="false">
          <van-swipe-item
            v-for="(item, index) in List.lessData"
            :key="index"
            class="free_live_div"
            @click="toFreeDetai(item)"
          >
            <div class="free_live_left">
              <img :src="item.cover" class="free_live_touxiang" />
              <div class="free_live_name">{{ item.teachers[0] ? item.teachers[0].name : '' }}</div>
            </div>
            <div class="free_live_right">
              <div class="free_live_title">{{ item.name }}</div>
              <div class="free_live_time">
                <van-icon :name="require('@/assets/images/free-time.png')" />
                <i>{{ item.beg_time }}</i>
              </div>
              <div class="free_live_people">
                <van-icon :name="require('@/assets/images/free-people.png')" />
                <i>{{ item.init_book_num }}人已预约</i>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <van-divider />

    <!-- 名师专项课 -->
    <div class="open">
      <div class="headline">
        <span class="h_left">
          <i>名师专项课</i>
        </span>
        <router-link
          :to="{ name: 'OpenLists', query: { subject_id: List.subject_id } }"
          class="h_right"
        >
          查看更多
          <van-icon name="arrow" />
        </router-link>
      </div>
      <div class="headline_three">
        <div
          class="headline_three_banxing"
          v-for="(item, index) in List.openCourse"
          :key="index"
          @click="toOpenDetail(item)"
        >
          <div class="banxing">
            <div class="imgs">
              <img v-lazy="item.cover" alt />
            </div>
            <div>
              <div class="banxing_title">2022年临床公开课—心电图/ 影像学上手难？11111111111111111111</div>
              <div v-if="item.price == '0.00'" class="mianfei">免费</div>
              <div v-else class="open_price">
                抢购价:
                <i>¥</i>
                <i style="font-size: 18px">{{ item.price }}</i>
              </div>
              <div class="xuexi">{{ item.init_view_num }}人已学习</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-divider />

    <!-- 金牌课程 -->
    <div class="pack">
      <div class="headline">
        <span class="h_left">
          <i>金牌课程</i>
        </span>
        <router-link
          :to="{ name: 'PackLists', query: { subject_id: List.subject_id } }"
          class="h_right"
        >
          查看更多
          <van-icon name="arrow" />
        </router-link>
      </div>

      <van-grid :gutter="15" :border="false" :column-num="2">
        <van-grid-item
          v-show="index < 4"
          v-for="(item, index) in List.goodsData"
          :key="index"
          @click="topackDetails1(item)"
        >
          <van-image width="100%" height="105" :src="item.cover" />
          <div class="content">
            <h3 class="title textoverflow1">2022年临床公开课—心电图/ 影像学上手难？</h3>
            <div class="jiage">
              抢购价:
              <span>
                <i>¥</i>
                <i style="font-size: 18px">{{ item.price }}</i>
              </span>
            </div>
            <div class="yuanjia">
              原价:
              <span>
                <i>¥</i>
                <i style="text-decoration: line-through">{{ item.orig_price }}</i>
              </span>
            </div>
            <div class="xuexi">{{ item.init_view_num }}人已学习</div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <van-divider />

    <!-- 名师团 -->
    <div class="teacher">
      <div class="headline">
        <span class="h_left">
          <van-icon :name="require('@/assets/images/headline_ico.png')" />
          <i class="ml10">名师团队</i>
        </span>
        <router-link :to="{ name: 'Teachers' }" class="h_right">
          查看更多
          <van-icon name="arrow" />
        </router-link>
      </div>
      <div class="pack_live">
        <van-swipe :loop="false" :width="290" :show-indicators="false">
          <van-swipe-item
            v-for="(item, index) in List.teachers"
            :key="index"
            @click="toTeachersInfo(item)"
          >
            <div class="pack_live_left">
              <img :src="item.avatar" class="pack_live_touxiang" />
              <div style="padding-left: 12px">
                <div class="pack_live_name">{{ item.name }}</div>
                <div class="pack_live_name1">{{ item.cert }}</div>
              </div>
            </div>
            <div class="pack_live_content">{{ item.intro }}</div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <Floor></Floor>

    <div class="fanhui">
      <van-icon :name="require('@/assets/images/fanhui.png')" />
      <router-link :to="{ path: '/' }" class="ml5" title="返回">返回</router-link>
      <!-- <i class="ml5">返回</i> -->
    </div>
  </div>
</template>

<script>
import Floor from '@/components/Floor'
import DownloadApp from '@/components/DownloadApp'
import SwitchSubject from '@/components/SwitchSubject'
import { getHomeSubject } from '@/api/home/index'
export default {
  components: {
    Floor,
    DownloadApp,
    SwitchSubject
  },
  data() {
    return {
      queryParams: {
        cate_id: 2
      },
      List: {
        exams: {}
      },
      kongList: [
        { name: '金牌网课', icon: require('@/assets/images/course_kong_1.png') },
        { name: '题库', icon: require('@/assets/images/course_kong_2.png') },
        { name: '热门资讯', icon: require('@/assets/images/course_kong_3.png') },
        { name: '报考指南', icon: require('@/assets/images/course_kong_4.png') }
      ]
    }
  },
  computed: {},
  mounted() {
    this.queryParams.cate_id = this.$route.query.subject_id || 2
    this.fetchList()
  },
  methods: {
    // 获取首页数据
    fetchList() {
      getHomeSubject(this.queryParams).then(res => {
        this.List = res.data
        const interval = this.List.exams.interval + ''
        this.List.exams.interval = interval.split('')
      })
    },
    handleKong(name) {
      if (name == '金牌网课') {
        this.$router.push({ name: 'PackLists', query: { subject_id: this.List.subject_id } })
      } else if (name == '题库') {
        this.$router.push({ name: 'Exams', query: { subject_id: this.List.subject_id } })
      } else if (name == '热门资讯') {
        this.$router.push({ name: 'News', query: { subject_id: this.List.subject_id } })
      } else if (name == '报考指南') {
        // window.location.href = 'https://wxs.wangpaiyixue.cn/#/register-guide?subject_id=' + this.List.subject_id
        this.$router.push({ name: 'RegisterGuide', query: { subject_id: this.List.subject_id } })
      }
    },
    // 免费课程详情页
    toFreeDetai(row) {
      this.$router.push({ path: '/free-details', query: { row: encodeURIComponent(JSON.stringify(row)) } })
    },
    // 名师课程详情页
    toOpenDetail(row) {
      const data = {
        id: row.goods_id
      }
      this.$router.push({ path: '/open-details', query: data })
    },
    // 金牌课程详情页
    topackDetails1(row) {
      const data = {
        id: row.id
        // token: this.share_token
      }
      this.$router.push({ path: '/pack-details', query: data })
    },
    // 名师团队
    toTeachersInfo(row) {
      this.$router.push({ name: 'TeachersInfo', query: row })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  padding-bottom: 85px;
  background: #ffffff;
  .head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 53px;
    align-items: center;
    background: linear-gradient(-90deg, #ffffff, #f5ffff);
    img {
      width: 103px;
      height: 32px;
    }
    .van-button {
      width: 94px;
      height: 35px;
      margin-right: 15px;
      background: #009697;
      border-radius: 17px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }

  .banner {
    .van-swipe {
      height: 140px;
      margin: 10px 15px 0px;
      border-radius: 5px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  ::v-deep .van-grid {
    margin-top: 15px;
    .van-grid-item__content {
      padding: 0;
    }
    .van-icon__image {
      width: 50px;
      height: 50px;
      // border-radius: 15px;
    }
    .van-grid-item__text {
      margin-top: 0px;
      font-size: 14px;
      font-weight: 400;
      color: #3b3b3b;
    }

    .van-grid-item__content--surround::after {
      border: none;
    }
  }

  .test-time {
    // width: 100%;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    background: #f7f7f7;
    .van-icon {
      vertical-align: text-top;
    }
    .bgm {
      display: inline-block;
      width: 19px;
      height: 22px;
      margin-right: 1.5px;
      text-align: center;
      line-height: 22px;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      background: url('@/assets/images/course-time-bg.png');
      background-size: 100% 100%;
    }
  }

  .hot_news {
    ul {
      margin: 0 35px 0 15px;
      li {
        .van-icon {
          font-size: 8px;
          margin-right: 10px;
        }
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 37px;
        @include textoverflow();
        a {
          color: #333333;
        }
      }
    }
  }

  ::v-deep .free_live {
    width: 100%;
    .van-swipe__track {
      margin: 8px 0 0 8px;
    }
    .free_live_div {
      box-sizing: border-box;
      display: flex;
      width: 100%;
      padding: 30px 20px;
      // height: 100%;
      height: 160px;
      background: url('@/assets/images/course_juxing.png');
      background-size: 100% 100%;
      border-radius: 10px;
      .free_live_left {
        // padding: 30px 0 0 20px;
        margin-right: 15px;
        .free_live_touxiang {
          width: 66px;
          height: 66px;
          border-radius: 50%;
        }
        .free_live_name {
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          line-height: 34px;
          text-align: center;
        }
      }
      .free_live_right {
        // padding-left: 8px;
        .free_live_title {
          margin-top: 2px;
          // height: 45px;
          display: inline-block;
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          line-height: 20px;
          @include textoverflow(2);
        }
        .free_live_time {
          margin-top: 10px;
          font-size: 14px;
          color: #333333;
        }
        .free_live_people {
          margin-top: 8px;
          font-size: 13px;
          color: #11a8a4;
        }
        .van-icon {
          vertical-align: text-top;
          margin-right: 5px;
        }
        img {
          width: 12px;
        }
      }
    }
  }

  // 名师专项课
  .open {
    // margin-top: 60px;
    .headline_three {
      margin: 15px 15px 0;
      .headline_three_banxing {
        margin-bottom: 25px;
      }
      .banxing {
        display: flex;
        .imgs {
          margin-right: 13px;
          img {
            width: 147px;
            height: 95px;
            border-radius: 1px;
            overflow: hidden;
          }
        }
      }

      .banxing_title {
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 19px;
        @include textoverflow(2);
      }
      .mianfei {
        font-size: 18px;
        font-weight: 600;
        color: #fd953f;
        line-height: 40px;
      }
      .open_price {
        font-size: 12px;
        font-weight: 400;
        color: #009697;
        line-height: 40px;
      }
      .xuexi {
        display: table;
        height: 20px;
        padding: 0 4px;
        line-height: 20px;
        font-size: 12px;
        font-weight: 400;
        color: #11a8a4;
        background: #e7f3f3;
        border-radius: 5px;
      }
    }
  }

  .pack {
    // padding: 0 30px;
    .van-grid {
      margin-top: 17px;
      .van-grid-item {
        box-shadow: 0px 1.5px 4px 0px rgba(210, 212, 213, 0.2);
        border-radius: 5px;
      }
      .van-grid-item__content {
        box-shadow: 0px 1px 4px 0px rgba(210, 212, 213, 0.2);
        border-radius: 5px;
        overflow: hidden;
      }
      .content {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px 10px;
        .title {
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          line-height: 21px;
        }
        .jiage {
          font-size: 12px;
          color: #009697;
          line-height: 25px;
        }
        .yuanjia {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999;
          // line-height: 30px;
        }
        .xuexi {
          display: table;
          margin-top: 10px;
          min-width: 75px;
          padding: 0 5px;
          height: 20px;
          line-height: 20px;
          font-size: 12px;
          color: #11a8a4;
          background: rgba(7, 120, 121, 0.1);
          border-radius: 2px;
        }
        .van-button {
          width: 27px;
          height: 14px;
          background: #fd953f;
          padding: 0;
          vertical-align: bottom;
          .van-button__text {
            font-size: 14px;
            font-weight: bold;
            color: #fffefe;
          }
        }

        .open_number {
          margin-left: 4px;
          line-height: 14px;
          font-size: 6px;
          font-weight: 500;
          text-decoration: line-through;
          color: #999999;
        }
      }
    }
  }

  .teacher {
    // 金牌讲师
    ::v-deep .pack_live {
      margin-bottom: 12px;
      .van-swipe__track {
        margin: 0 0 0 15px;
      }
      .van-swipe-item {
        // display: flex;
        box-sizing: border-box;
        // width: 290px !important;
        height: 182px;
        padding: 15px;
        background: url('@/assets/images/home_teacher_box.png');
        background-size: 100% 100%;
        border-radius: 5px;
        .pack_live_left {
          display: flex;
          .pack_live_touxiang {
            width: 66px;
            height: 66px;
            border-radius: 50%;
          }
          .pack_live_name {
            font-size: 14px;
            font-weight: 600;
            color: #333333;
            line-height: 38px;
          }
          .pack_live_name1 {
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 18px;
          }
        }
        .pack_live_content {
          margin-top: 12px;
          font-size: 13px;
          font-weight: 400;
          color: #666666;
          line-height: 22px;
          @include textoverflow(3);
        }
      }
    }
  }

  .fanhui {
    position: fixed;
    top: 70%;
    right: 0;
    width: 73px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: #009798;
    box-shadow: 0px 2px 7px 0px rgba(0, 151, 152, 0.23);
    border-radius: 17px 0px 0px 17px;

    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    .van-icon {
      vertical-align: text-top;
    }
    .router-link-active {
      color: #ffffff;
    }
  }
}
</style>
